<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

	</style>
</head>
<body>
	
	<div id="app1">
		<input v-model="message" placeholder="edit me">
		<textarea v-model="message" placeholder="add multiple lines"></textarea>
		<p>Message is: {{ message }}</p>

		<hr>
		<input type="checkbox" id="checkbox" v-model="checked">
		<label for="checkbox">{{ checked }}</label>

		<hr>
		<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
		<label for="jack">Jack</label>
		<input type="checkbox" id="john" value="John" v-model="checkedNames">
		<label for="john">John</label>
		<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
		<label for="mike">Mike</label>
		<br>
		<span>Checked names: {{ checkedNames }}</span>

		<hr>
		<input type="radio" id="one" value="One" v-model="picked">
		<label for="one">One</label>
		<br>
		<input type="radio" id="two" value="Two" v-model="picked">
		<label for="two">Two</label>
		<br>
		<span>Picked: {{ picked }}</span>

		<hr>
		<select v-model="selected2">
		  <option value="1">A</option>
		  <option value="2">B</option>
		  <option value="3">C</option>
		</select>
		<span>Selected: {{ selected }}</span>

		<hr>
		<select v-model="selected">
		  <option v-for="option in options" v-bind:value="option.value">
		    {{ option.text }}
		  </option>
		</select>
		<span>Selected: {{ selected }}</span>

		<hr>
		<input v-model.lazy.trim="msg" >
		<p>{{msg}}</p>

		<hr>
		<input v-model.number="age" type="number">
		<p>{{age}}</p>
	</div>

	<script src="node_modules/vue/dist/vue.min.js"></script>
	<script>
		var app1 = new Vue({
			el: '#app1',
			data: {
				message: '',
				checked: true,
				checkedNames: ['Jack', 'Mike'],
				picked: 'Two',
				selected2: 3,
				selected: 'A',
			    options: [
			      { text: 'One', value: 'A' },
			      { text: 'Two', value: 'B' },
			      { text: 'Three', value: 'C' }
			    ],
			    msg: '',
			    age: 8
			}

		});
	</script>
</body>
</html>